<template>
  <view class="inspection-container">

    <!-- 巡检记录列表 -->
    <view class="inspection-list">
      <!-- 加载状态 -->
      <view v-if="loading" class="loading-container">
        <text class="loading-text">加载中...</text>
      </view>
      
      <!-- 空数据提示 -->
      <view v-else-if="inspectionRecords.length === 0" class="empty-container">
        <text class="empty-text">暂无巡检记录</text>
      </view>
      
      <!-- 记录列表 -->
      <view v-else v-for="(item, index) in inspectionRecords" :key="index" class="inspection-card">
        <view class="card-content">
          <view class="info-row">
            <text class="info-label">巡检时间：</text>
            <text class="info-value">{{ item?.patrolTime || '' }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">巡检结果：</text>
            <text class="info-value">{{ item?.inspectionResults || '' }}</text>
          </view>
        </view>
        <view class="detail-btn" @click="viewDetail(item)">
          <text class="detail-text">详情</text>
                 </view>
       </view>
     </view>

     <!-- 分页器 -->
     <view class="pagination-container" v-if="total > 0">
       <uni-pagination 
         :total="total" 
         :pageSize="queryParams.pageSize" 
         :current="queryParams.pageNum"
         @change="onPageChange" 
         show-icon="true" 
       />
     </view>

     <!-- 巡检详情弹窗 -->
     <uni-popup ref="inspectionDetailPopup" type="center" @close="closeInspectionDetail">
       <view class="inspection-detail-popup">
         <uni-card :is-shadow="true" :border="false" margin="0" class="record-card">
           <view class="popup-header">
             <text class="popup-title">巡检详情</text>
             <text class="close-icon" @click="closeInspectionDetail">×</text>
           </view>
           <view class="popup-content">
             <uni-row class="detail-row">
               <uni-col>
                 <view class="detail-col">
                   <view class="detail-item">
                     <text class="label">巡检时间：</text>
                     <text class="value">{{ currentInspectionItem?.patrolTime || '' }}</text>
                   </view>
                 </view>
               </uni-col>
             </uni-row>
             <uni-row class="detail-row">
               <uni-col>
                 <view class="detail-col">
                   <view class="detail-item">
                     <text class="label">巡检人员：</text>
                     <text class="value">{{ currentInspectionItem?.executor || '' }}</text>
                   </view>
                 </view>
               </uni-col>
             </uni-row>
             <uni-row class="detail-row">
               <uni-col>
                 <view class="detail-col">
                   <view class="detail-item">
                     <text class="label">巡检结果：</text>
                     <text class="value">{{ currentInspectionItem?.inspectionResults || '' }}</text>
                   </view>
                 </view>
               </uni-col>
             </uni-row>
             <uni-row class="detail-row">
               <uni-col>
                 <view class="detail-col">
                   <view class="detail-item">
                     <text class="label">备注：</text>
                     <text class="value">{{ currentInspectionItem?.notes || '' }}</text>
                   </view>
                 </view>
               </uni-col>
             </uni-row>
             <uni-row class="detail-row">
               <uni-col>
                 <view class="detail-col">
                   <view class="detail-item">
                     <text class="label">巡检照片：</text>
                     <text class="photo-list">
                       <image v-for="(photo, index) in (getPictureList(currentInspectionItem?.picture) || [])" :key="index" :src="baseUrl + photo"
                         class="photo-item" mode="aspectFill"></image>
                     </text>
                   </view>
                 </view>
               </uni-col>
             </uni-row>
           </view>
         </uni-card>
       </view>
     </uni-popup>
   </view>
 </template>

<script setup>
import { ref, onMounted } from 'vue'
import { listRecord } from '@/api/user'
import useUserStore from '@/store/modules/user.js'

// 基础URL
const baseUrl = import.meta.env.VITE_APP_BASE_URL

// 用户store
const userStore = useUserStore()

// 查询参数
const queryParams = ref({
  pageNum: 1,
  pageSize: 4,
  createCompany: userStore.companyId
})

// 巡检记录数据
const inspectionRecords = ref([])
const total = ref(0)

// 加载状态
const loading = ref(false)

// 处理图片列表，将逗号分隔的字符串转换为数组
const getPictureList = (pictureStr) => {
  if (!pictureStr) return []
  return pictureStr.split(',').map(item => item.trim()).filter(item => item)
}

// 获取巡检记录列表
const getInspectionRecords = async () => {
  try {
    loading.value = true
    const response = await listRecord(queryParams.value)
    if (response && response.rows) {
      inspectionRecords.value = response.rows
      total.value = response.total || 0
    }
  } catch (error) {
    console.error('获取巡检记录列表失败：', error)
    uni.showToast({
      title: '获取数据失败',
      icon: 'error'
    })
  } finally {
    loading.value = false
  }
}

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 巡检详情弹窗相关
const inspectionDetailPopup = ref(null)
const currentInspectionItem = ref({
  inspectionTime: '',
  inspector: '',
  result: '',
  details: '',
  photos: []
})

// 查看详情
const viewDetail = (item) => {
  currentInspectionItem.value = item
  inspectionDetailPopup.value.open()
}

// 分页切换事件
const onPageChange = (e) => {
  queryParams.value.pageNum = e.current
  getInspectionRecords()
}

// 关闭巡检详情弹窗
const closeInspectionDetail = () => {
  inspectionDetailPopup.value.close()
  currentInspectionItem.value = {
    inspectionTime: '',
    inspector: '',
    result: '',
    details: '',
    photos: []
  }
}

// 页面加载时获取数据
onMounted(() => {
  getInspectionRecords()
})
</script>

<style>
.inspection-container {
  min-height: 100vh;
  background-color: #fff;
}

.page-title {
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
  color: #000;
  margin-right: 60rpx;
}

.inspection-list {
  padding: 20rpx;
}

.inspection-card {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.inspection-card:last-child {
  margin-bottom: 0;
}

.card-content {
  flex: 1;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-label {
  font-size: 28rpx;
  color: #333;
  margin-right: 10rpx;
}

.info-value {
  font-size: 28rpx;
  color: #666;
}

.detail-btn {
  margin-left: 20rpx;
}

.detail-text {
  font-size: 28rpx;
  color: #007aff;
}

/* 巡检详情弹窗样式 */
.inspection-detail-popup {
  background-color: #fff;
  border-radius: 16rpx;
  width: 90vw;
  max-height: 80vh;
  overflow: hidden;
}

.inspection-detail-popup .popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 30rpx;
  border-bottom: 1rpx solid #eee;
}

.inspection-detail-popup .popup-header .popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.inspection-detail-popup .popup-header .close-icon {
  font-size: 50rpx;
  color: #666;
}

.inspection-detail-popup .popup-content {
  padding: 30rpx;
}

.inspection-detail-popup .popup-content .detail-item {
  padding: 20rpx 0;
}

.inspection-detail-popup .popup-content .detail-item .label {
  font-size: 28rpx;
  color: #000;
  width: 160rpx;
  font-weight: bold;
}

.inspection-detail-popup .popup-content .detail-item .value {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
}

.inspection-detail-popup .popup-content .detail-item .photo-list {
  display: flex;
  flex-wrap: wrap;
}

.inspection-detail-popup .popup-content .detail-item .photo-list .photo-item {
  width: 100rpx;
  height: 100rpx;
  margin: 10rpx;
}

/* 加载状态样式 */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100rpx 0;
}

.loading-text {
  font-size: 28rpx;
  color: #666;
}

/* 空数据样式 */
.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}

/* 分页器样式 */
.pagination-container {
  background-color: #fff;
  padding: 30rpx;
  display: flex;
  justify-content: center;
  margin-top: 20rpx;
}
</style>
